// 功能函数
function addKnow(tree, no, know) {
    $.ajax({
        url: 'func/addKnowledge',
        type: 'post',
        data: {'tree': tree, 'know': know, 'no': no},
        success: function (data) {
            $('#modal').modal('hide');
            data = JSON.parse(data);
            if (data.message === 200) {
                updateTrees();
            }
        },
        error: function (data) {

        }
    });
}
function delKnow(tree, no, total) {
    $.ajax({
        url: 'func/delKnowledge',
        type: 'post',
        data: {'tree': tree,'no': no,'total':total},
        success: function (data) {
            $('#modal').modal('hide');
            data = JSON.parse(data);
            if (data.message === 200) {
                updateTrees();
            }
        },
        error: function (data) {

        }
    });
}
function delMastered(know) {
    $.ajax({
        url: 'func/delMastered',
        type: 'post',
        data: {'know': know},
        success: function (data) {
            $('#modal').modal('hide');
            data = JSON.parse(data);
            if (data.message === 200) {
                updateMastered();
                updateTrees();
            }
        },
        error: function (data) {

        }
    });
}
function addMastered(know) {
    $.ajax({
        url: 'func/addMastered',
        type: 'post',
        data: {'know': know},
        success: function (data) {
            $('#modal').modal('hide');
            data = JSON.parse(data);
            if (data.message === 200) {
                updateMastered();
                updateTrees();
            }
        },
        error: function (data) {

        }
    });
}

// 更新页面
function updateTrees() {
    tree=$('.lb-sign li.active').text();
    total = $('.lb-item.active li').length;
    $.ajax({
        url: 'func/getMyTrees',
        type: 'get',
        success: function (data) {
            datas = JSON.parse(data);
            content=$("#hst-1");
            if (datas.length===0){
                content.html("<div class=\"row\" " +
                    "<div class=\"col-md-12\">\n" +
                    "<h1>当前还未收藏知识点哟~</h1>\n" +
                    "<h2>快去尝试下图谱或推荐内容吧。</h2>\n" +
                    "<p></p>\n" +
                    "</div>\n" +
                    "</div>");
            }else{
                content.html("<div class=\"lb-box\" id=\"lb-1\">" +
                    "<div class=\"lb-content\">" +
                    "</div>" +
                    "<ol class=\"lb-sign\">" +
                    "</ol> " +
                    "<div class=\"lb-ctrl left\">＜</div>" +
                    "<div class=\"lb-ctrl right\">＞</div>" +
                    "</div>");
                 lb_content=$("#lb-1 .lb-content");
                 lb_sign=$("#lb-1 .lb-sign");
                datas.forEach(function (data,index) {
                    leaf="";
                    data.knows.forEach(function (know,index) {
                           leaf+="<li class=\"";
                           leaf+=index%2===0?"l":"r";
                           leaf+="\">";
                           leaf+=" <div class=\"tree-branch action\">\n";
                           leaf+=index%2===1?"<i></i><i></i>":"";
                           leaf+=" <span class=\"tbox";
                           leaf+=(data.flags)[index]?" already":"";
                           leaf+="\"";
                           leaf+=" sort=\""+(index+1)+"\" onclick=\"aboutKnow($(this))\">"+know+"</span>\n";
                           leaf+=index%2===0?"<i></i><i></i>":"";
                           leaf+= "</div></li>\n";
                    });
                    content="";
                    content+="<div class=\"lb-item";
                    if (total>1){
                        content+=index===parseInt(tree)-1?" active":"";
                    }
                    else{
                        content+=index===0?" active":"";
                    }
                    content+="\">";
                    content+="<div class=\"skill-tree-ems\">\n";
                    content+="<div class=\"tree-wrap\">\n";
                    content+="<div class=\"tree\">\n";
                    content+="<div class=\"tree-main\">\n";
                    content+="<ul>\n";
                    content+=leaf;
                    content+="</ul></div></div></div></div></div>\n";
                    lb_content.append(content);
                    sign="";
                    sign+="<li class=\"";
                    if (total>1){
                        sign+=index===parseInt(tree)-1?"active":"";
                    }
                    else{
                        sign+=index===0?"active":"";
                    }
                    sign+="\">"+(index+1)+"</li>";
                    lb_sign.append(sign);
                })
            }
            new Lb({
                id: 'lb-1',
                speed: 1000,
                delay: 10000,
                direction: 'left',
            }).start();
        },
        error: function (data) {

        }
    });
}
function updateMastered() {
    $.ajax({
        url: 'func/getMastered',
        type: 'get',
        success: function (data) {
            datas = JSON.parse(data);
            content=$("#hst-2");
            if (datas.length===0){
                content.html("<div class=\"row\"" +
                    " <div class=\"col-md-12\">\n" +
                    " <h1>当前还未掌握知识点哟~</h1>\n" +
                    " <h2>快去尝试下图谱或推荐内容吧。</h2>\n" +
                    " <p></p>\n" +
                    " </div>\n" +
                    " </div>");

            }else{
                content.html("<div class=\"row\"" +
                    "                                        <aside class=\"row widget widget_tag_cloud\">\n" +
                    "                                            <div class=\"tagcloud\"></div>\n" +
                    "                                        </aside>\n" +
                    "                                    </div>");
                content=$("#hst-2 .tagcloud");
                datas.forEach(function (data) {
                    content.append("<a class=\"tag-link-1 \"  style=\"margin-right: 5px\"\n" +
                        "onclick=\"mastered($(this).text())\">"+data.name+"</a>");
                })
            }

        },
        error: function (data) {

        }
    });
}
function updateBooks() {
    $.ajax({
        url: 'func/getMyBooks',
        type: 'get',
        success: function (data) {
            datas = JSON.parse(data);
            content=$("#hst-4");
            if (datas.length===0){
                content.html("<div class=\"row\" " +
                    "<div class=\"col-md-12\">\n" +
                    "<h1>当前还未收藏哟~</h1>\n" +
                    "<h2>快去尝试下图谱或推荐内容吧。</h2>\n" +
                    "<p></p>\n" +
                    "</div>\n" +
                    "</div>");
            }else{
                content.html("<div style=\"padding-bottom: 50px;\"></div>");
                content=$("#hst-4 div");
                datas.forEach(function (data) {
                     content.append("<div class=\"media comment\" >" +
                         "                                            <div class=\"media-left\">\n" +
                         "                                                <a target=\"_blank\" href=\"/book_detail?id="+data.id+"\"" +
                         "                                                   class=\"media-object\">\n" +
                         "                                                    <img src=\""+data.img+"\" alt=\""+data.name+"\">\n" +
                         "                                                </a>\n" +
                         "                                            </div>\n" +
                         "                                            <div class=\"media-body\">\n" +
                         "                                                <div class=\"comment-body\">\n" +
                         "                                                    <header class=\"comment-head\">\n" +
                         "                                                        <a target=\"_blank\" href=\"/book_detail?id="+data.id+"\"" +
                         "                                                            <h2 class=\"commenter-name\" style='font-weight: bold'\n" +
                         "                                                                >"+data.name+"</h2>\n" +
                         "                                                        </a>\n" +
                         "                                                        <h6 class=\"comment-time\">\n" +
                         "                                                            <i class=\"fa fa-user\"></i><span>作者</span>|<span\n" +
                         "                                                                >"+data.author+"</span>\n" +
                         "                                                        </h6>\n" +
                         "                                                    </header>\n" +
                         "                                                    <footer class=\"comment-foot\">\n" +
                         "                                                        <p >"+data.bookIntro+"</p>\n" +
                         "                                                    </footer>\n" +
                         "                                                </div>\n" +
                         "                                            </div>\n" +
                         "                                        </div>")
                })
            }
        },
        error: function (data) {

        }
    });
}
// 模态窗
function aboutKnow(know){
    knowledge=know.text();
    tree=$('.lb-sign li.active').text();
    total = $('.lb-item.active li').length;
    no=know.attr('sort');
    content="";
    content+="<h4 class=\"modal-title\" align=\"center\">您选择了</h4>\n" +
        "                <br/>\n" +
        "                <div class=\"row\" align=\"center\">\n" +
        "                    <span style=\"font-size: 15px\">第</span>\n" +
        "                    <span style=\"color: #c7254e;font-size: 15px\">"+tree+"</span>\n" +
        "                    <span style=\"font-size: 15px\">棵知识树</span>\n" +
        "                </div>\n" +
        "                <br/>\n" +
        "                <div class=\"row\" align=\"center\">\n" +
        "                    <span style=\"font-size: 15px\">第</span>\n" +
        "                    <span style=\"color: #c7254e;font-size: 15px\">"+no+"</span>\n" +
        "                    <span style=\"font-size: 15px\">个知识点:</span>\n" +
        "                    <span  style=\"color: #c7254e;font-size: 15px\">"+knowledge+"</span>\n" +
        "                </div>\n" +
        "                <br/>\n" +
        "                <div class=\"row\" align=\"center\">\n" +
        "                    <div class=\"col-sm-offset-2 col-sm-2\">\n" +
        "                        <span class=\"btn btn-default btn-primary\" onclick='delKnow("+tree+","+no+","+total+")'>取消收藏</span>\n" +
        "                    </div>\n" +
        "                    <div class=\" col-sm-2\">\n" +
        "                        <a target=\"_blank\" onclick=\" $('#myModal').modal('hide');\"\n" +" href='book?search=" + knowledge + "'" +
        "                           class=\"btn btn-default btn-primary\">查看书籍</a>\n" +
        "                    </div>\n";

        content += know.is('.already') ? "<div class=\"col-sm-3\"><span class=\"btn btn-default btn-primary\" onclick='delMastered(\""+knowledge+"\")'>设为未掌握</span></div>" : "<div class=\"col-sm-3\"><span class=\"btn btn-default btn-primary\" onclick='addMastered(\""+knowledge+"\")'>设为已掌握</span></div>";
        content+="</div><br/>";
    $('#modal .modal-body').html(content);
    $('#modal').modal('show');
}
function recKnow(know) {
    $.ajax({
        url: 'func/getTrees',
        success: function (data) {
            datas = JSON.parse(data);
            content = $('#modal .modal-body');
            content.html("");
            content.append("<h4 class='modal-title' align='center'>收藏知识</h4>" +
                "                <br/>" +
                "                <div class='row' align='center'>" +
                "                    <span style='color: #c7254e;font-size: 15px'>" + know + "</span>" +
                "                </div>" +
                "                <br/>");
            datas.forEach(
                function (data, index, datas) {

                    if (data.length < 10) {
                        content.append("<div class='row ' align='center' >\n" +
                            "                    <div class='col-sm-12'>\n" +
                            "                        <span class='col-md-offset-1' style='font-size: 15px'>第</span><span style='color: #c7254e;font-size: 15px'" +
                            "                           >" + (index + 1) + "</span><span style=\"font-size: 15px\">棵知识树</span><span>&nbsp;&nbsp;&nbsp;</span><span" +
                            "                             style=\"font-size: 15px\">" + data[0] + "</span><span>...</span><span" +
                            "                             style=\"font-size: 15px\">" + data[data.length - 1] + "</span>" +
                            "<span class='btn btn-default btn-primary' onclick='addKnow($(this).attr(\"tree\"),$(this).attr(\"sort\"),\""+know+"\")' tree='" + (index + 1) + "' sort='" + (data.length + 1) + "'>收藏至此</span>" + "</div>" +
                            " </div>");
                    } else {
                        content.append("<div class='row ' align='center' >\n" +
                            "                    <div class='col-sm-12'>\n" +
                            "                        <span class='col-md-offset-1' style='font-size: 15px'>第</span><span style='color: #c7254e;font-size: 15px'" +
                            "                           >" + (index + 1) + "</span><span style=\"font-size: 15px\">棵知识树</span><span>&nbsp;&nbsp;&nbsp;</span><span" +
                            "                             style=\"font-size: 15px\">" + data[0] + "</span><span>...</span><span" +
                            "                             style=\"font-size: 15px\">" + data[data.length - 1] + "</span>" +
                            "<span class='btn btn-default btn-primary' disabled>已达上限</span>" + "</div>" +
                            " </div>");
                    }


                }
            );

            if (datas.length < 5) {
                content.append("<div class='row ' align='center'>" +
                    "                    <div class='col-sm-offset-3 col-sm-3'>" +
                    "                        <a target='_blank' onclick=\" $('#saveKnow').modal('hide');\"" + " href='book?search=" + know + "'" +
                    "                           class='btn btn-default btn-block btn-primary'>查看书籍</a>" +
                    "                    </div>"+
                    "<div class='col-sm-3'>\n" +
                    "                       <span class='btn btn-default btn-primary' onclick='addKnow($(this).attr(\"tree\"),$(this).attr(\"sort\"),\""+know+"\")' tree='" + (datas.length + 1) +"'"+
                    "                              sort='1'>收藏至新知识树</span>\n" +
                    "                    </div>" + "</div>" +
                    "                <br/>");
            } else {
                content.append("<div class='row ' align='center'>" +
                    "                    <div class='col-sm-offset-3 col-sm-3'>" +
                    "                        <a target='_blank' onclick=\" $('#saveKnow').modal('hide');\"" + " href='book?search=" + know + "'" +
                    "                           class='btn btn-default btn-block btn-primary'>查看书籍</a>" +
                    "                    </div>" + "</div>" +
                    "                <br/>");
            }
            $('#modal').modal('show'); //显示模态框
        }

    });
}
function mastered(know) {
    content = $('#modal .modal-body');
    content.html("");
    content.append("<h4 class=\"modal-title\" align=\"center\">您选择了</h4>\n" +
        "                <br/>\n" +
        "                <div class=\"row\" align=\"center\">\n" +
        "                    <span style=\"font-size: 15px\">知识点:</span>\n" +
        "                    <span style=\"color: #c7254e;font-size: 15px\">"+know+"</span>\n" +
        "                </div>\n" +
        "                <br/>\n" +
        "                <div class=\"row\" align=\"center\">\n" +
        "                    <span style=\"font-size: 15px\">请选择操作。</span>\n" +
        "                </div>\n" +
        "                <br/>\n" +
        "                <div class=\"row\" align=\"center\">\n" +
        "                    <div class=\"col-sm-offset-3 col-sm-3\">\n" +
        "                        <a target=\"_blank\" onclick=\" $('#mastered').modal('hide');\"\n" + " href='book?search=" + know + "'" +
        "                           class=\"btn btn-default btn-primary \">查看书籍</a>\n" +
        "                    </div>\n" +
        "                    <div class=\" col-sm-3\">\n" +
        "                        <span class=\"btn btn-default btn-primary\" onclick='delMastered(\""+know+"\")' >设为未掌握</span>\n" +
        "                    </div>\n" +
        "                </div>\n" +
        "                <br/>");
     $('#modal').modal('show');
}
function noResult() {
    content = $('#modal .modal-body');
    content.html("");
    content.append("<h4 class=\"modal-title\" align=\"center\">抱歉</h4>\n" +
        "                <br/>\n" +
        "                <div class=\"row\" align=\"center\">\n" +
        "                    没有搜索到该知识。原因可能是：\n" +
        "                    <br/><br/>\n" +
        "                    <p style=\"color: #c7254e;font-size: 15px\">本知识网络还未收录该知识点</p>\n" +
        "                    <p style=\"color: #c7254e;font-size: 15px\">您搜索的知识并不属于计算机知识点</p>\n" +
        "                    您可以搜索其他感兴趣的知识\n" +
        "                </div>\n" +
        "                <br/>");
    $('#modal').modal('show');
}



// 绘图
var myChart = echarts.init($("#gxt")[0], "macarons", {renderer: 'svg'});
var nodes;
var links;
var option;
var centerIndex;
myChart.on('click', function (params) {
    if (params.dataType === 'node' && params.data.category === 1) {
        nodes[params.dataIndex].category = 0;
        nodes[params.dataIndex].centerIndex = ++centerIndex;
        getMoreJson(params.name);
    }
    if (params.dataType === 'node' && params.data.category === 0) {
        recKnow(params.name);
    }
});


function draw(name) {
    var search = name;
    if (search === null) {
        search = "神经网络";
    }
    $.ajax({
        url: "API/graph",
        type: "get",
        data: {'search': search},
        success: function (data) {
            if (data !== "null") {
                myChart.clear();
                centerIndex = 0;
                data = JSON.parse(data);
                nodes = data.nodes;
                nodes[0].centerIndex = centerIndex;
                links = data.links;
                categories = data.categories;
                option = {
                    legend: [{
                        data: categories
                    }],
                    series: [{
                        type: 'graph',
                        layout: 'force',
                        animation: false,
                        focusNodeAdjacency: true,//突出相邻
                        roam: true,
                        label: {//标签位置
                            normal: {
                                position: 'inside',
                                formatter: '{b}',
                                textStyle: {
                                    color: '#2D2F3B',
                                    fontWeight: 'bolder'
                                },
                                show: true
                            }
                        },
                        edgeSymbol: ['circle', 'arrow'],
                        symbolSize: function (value, x) {//设置图像的大小
                            switch (x.data.category) {
                                case 3:
                                    return 60;
                                case 4:
                                    return 80;
                                default:
                                    return 50;
                            }
                        },
                        draggable: true,
                        data: nodes,
                        categories: categories,
                        force: {
                            repulsion: 200,
                            gravity: 0.01,
                            edgeLength: [100, 300]
                        },
                        edges: links,
                        lineStyle: {
                            color: 'source',
                            curveness: 0.2
                        },
                        emphasis: {
                            lineStyle: {
                                width: 10
                            }
                        }
                    }]
                };
                myChart.setOption(option);
            } else {
                noResult(); //显示模态框
            }
        },
        error: function (data) {
            // console.log(data);
        }
    })
}
draw('神经网络');


function getMoreJson(name) {
    $.ajax({
        url: "API/graph",
        type: "get",
        data: {'name': name},
        success: function (data) {
            if (data !== "null") {
                data = JSON.parse(data);
                newNodes = data.nodes;
                // console.log(newNodes);
                for (let node of newNodes) {
                    nodes.push(node);
                }
                newLinks = data.links;
                // console.log(nodes);
                for (let link of newLinks) {
                    links.push(link);
                }
                myChart.setOption(option);
            }

        },
        error: function (data) {
            // console.log(data);
        }
    })
}

